<template>
	<view class="answerquestiondetail">
		<view class="quesitonview">
			<view class='titlebox'>
					<image class='avatarimg' :src='urls+userInfo.avatar'></image>
					<view class='titlebox_right'>
						<block v-if='Object.keys(userInfo).length != 0'>
							<view class='nickname'>{{userInfo.nickname}}</view>
						</block>
						<view class='timescreen'>{{profileinfo.createtime}}</view>
					</view>
			</view>
			<view class='realquestion'>{{profileinfo.content}}</view>
		</view>
		<view class='commentbox' v-if='Object.keys(answered).length != 0'>
			<view class="comment_title"><view class="comment_line"></view>认同用户({{Object.keys(answered).length}})</view>
			<!-- <block v-for='(item,index) in 1' :key='index'> -->
				<view class="item_comment">
					
					<view class='specialtitlebox'>
						<view class='nothing'>
							<image class='avatarimg' :src='urls+userInfo.avatar'></image>
							<view class='titlebox_right'>
								<block v-if='answered.user'>
									<view class='nickname'>{{answered.user.nickname}}</view>
									<view class='timescreen'>{{answered.user.createtime}}</view>
								</block>
							</view>
						</view>
						<view class='statusbox'>
							<image class='deagreeimg' src='../../static/image/zxwb_ico_rt@2x.png'></image>
							<view>认同</view>
						</view>
					</view>
					<view class='contentcontent'>{{answered.answer}}</view>
				</view>
			<!-- </block> -->
		</view>
		
		<view class='commentbox'>
			<view class="comment_title"><view class="comment_line"></view>回复列表({{profileinfo.comment_num}})</view>
			<block v-for='(item,index) in answer' :key='index'>
				<view class="item_comment">
					
					<view class='specialtitlebox'>
						<view class='nothing'>
							<image class='avatarimg' :src='urls+item.user.avatar'></image>
							<view class='titlebox_right'>
								<block v-if='item.user'>
									<view class='nickname'>{{item.user.nickname}}</view>
								</block>
								<view class='timescreen'>{{item.createtime}}</view>
							</view>
						</view>
						<view class='statusbox' v-if='profileinfo.is_author == 1 && Object.keys(answered).length==0' @click='goagree(item.id)'>
							<image class='deagreeimg' src='../../static/image/zxwb_ico_rt@2x.png'></image>
							<view>认同</view>
						</view>
						<view v-else class='nostatusbox'>
							
						</view>
					</view>
					<view class='contentcontent'>{{item.answer}}</view>
				</view>
			</block>
		</view>
		<view class="btm_box" >
			<view class="input_box">
				<input type="text" v-model="textMsg"  placeholder="我来说两句"  placeholder-class="input_class"/>
				<view class='input_box_right'>
					<image class='addicon' ></image>
					<view class="input_btn" @tap="sendText">发表</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {askidentyfy,
askread,
askcomment} from '@/api/data.js'
	export default{
		data(){
			return{
				textMsg:'',
				id:'',//问题详情id
				profileinfo:'',
				answer:'',//评论列表
				answered:'',//认同对象
				userInfo:'',
				urls:this.$common.baseUrl
			}
		},
		onLoad(option) {
			this.id = option.id
			console.log(this.id)
			this._getdetail()
		},
		methods:{
			goagree(id){//认同
				let obj = {
					ask_id:this.id,
					answer_id:id
				}
				askidentyfy(obj).then(res=>{
					if(res.code == 1){
						// 重新请求最新数据
						this._getdetail()
					}else{
						this.$msg(res.msg)
					}
				})
			},
			_getdetail(){
				console.log('1111122')
				let obj = {
					id:this.id
				}
				console.log(obj)
				askread(obj).then(res=>{
					//console.log(res.data.code)
					if(res.code == 1){
						this.profileinfo = res.data
						if(this.profileinfo.answers.length!=0){
							this.answer = res.data.answers
						}
						if(this.profileinfo.answered.length!=0){
							this.answered = res.data.answered
						}
						if(Object.keys(res.data.user).length != 0){
							this.userInfo = res.data.user
							// console.log(res.data.data.user,34645)
						}
						
						console.log(this.profileinfo)
					}else{
						this.$msg(res.msg)
					}
				})
			},
			sendText(){
				let obj = {
					content:this.textMsg,
					ask_id:this.id
				}
				askcomment(obj).then(res=>{
					if(res.code == 1){
						this.textMsg=''
						// 评论成功后立即重新渲染
						this._getdetail()
					}else{
						this.$msg(res.msg)
					}
				})
			}
		}
	}
</script>

<style>
	.answerquestiondetail{
		height:100vh;
		width:100vw;
		background-color: #F5F5F5;
		padding-top: 20rpx;
	}
	.quesitonview{
		/* border:1rpx solid red; */
		padding:20rpx 30rpx 0rpx;
		background:#FFFFFF;
	}
	.realquestion{
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		padding: 20rpx 0rpx;
	}
	
	/* 评价列表 */
	.commentbox{
		width:100%;
		background-color: #FFFFFF;
		margin-top: 20rpx;
		height:auto;
		padding: 30rpx 30rpx;
	}
	
	.comment_title{
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		/* margin-bottom: 29rpx; */
	}
	.comment_line{
		width: 4rpx;
		height: 20rpx;
		background: #FFDD47;
		border-radius: 2rpx;
		margin-right: 10rpx;
	}
	.item_comment{
		/* border:1rpx solid red; */
		/* padding-bottom: 20rpx; */
		padding-top: 30rpx;
	}
	.titlebox{
		display: flex;
		justify-content: flex-start;
		width:100%;
		height:auto;
	}
	.specialtitlebox{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width:100%;
		height:auto;
	}
	.nothing{
		display: flex;
	}
	.statusbox{
		width: 100rpx;
		height: 36rpx;
		background: #FFDD47;
		border-radius: 4rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.nostatusbox{
		width: 100rpx;
		height: 36rpx;
	}
	.deagreeimg{
		width:20rpx;
		height:14rpx;
		margin-right: 10rpx;
	}
	.avatarimg{
		height:70rpx;
		width:70rpx;
		border-radius: 50%;
	}
	.titlebox_right{
		margin-left: 20rpx;
		height:70rpx;
		width:auto;
		/* border:1rpx solid red; */
		display: flex;
		/* align-items: ; */
		flex-direction: column;
		justify-content: space-around;
	}
	.nickname{
		height:30rpx;
		font-size: 30rpx;
		line-height: 30rpx;
		width:300rpx;
	}
	.timescreen{
		height: 30rpx;
		line-height: 30rpx;
		width:300rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}
	.contentcontent{
		margin:10rpx 0rpx 10rpx;
	}
	
	/* 评论框 */
	.btm_box{
		width: 100%;
		min-height: 100upx;
		padding: 0 1%;
		background-color: #fff;
		display: flex;
		position: fixed;
		z-index: 20;
		bottom:-2upx;
		
		left:0;
		right:0;
		padding: 0 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: 1rpx solid #E5E5E5;
	}
	.input_box{
		width: 100%;
		height: 58rpx;
		background: #F5F5F5;
		border-radius: 10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	input{
		width: 464rpx;
		height: 100%;
		padding: 0 21rpx;
		font-size: 26rpx;
	}
	.input_class{
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}
	.input_box_right{
		width:auto;
		height:100%;
		display: flex;
		align-items: center;
		
	}
	.addicon{
		width:36rpx;
		height:36rpx;
		margin-right: 20rpx;
	}
	.input_btn{
		width: 140rpx;
		height: 58rpx;
		background: linear-gradient(126deg, #FFDD47, #FCB630);
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}
</style>
